<template>
  <div class="boms">
    <dv-scroll-board
      ref="board"
      :config="config"
      :style="{ width: '100%', height: '80%' }"
    />
  </div>
</template>

<script>
import { getGetCarApplyTopList } from "@/api/dataV/index";
export default {
  name: "BomView",
  data() {
    return {
      config: {},
      trme: null,
      num: 15,
    };
  },
  mounted() {
    console.log(document.getElementsByClassName("boms")[0].style);
    window.addEventListener("resize", this.resizeView);
    this.init();
  },
  beforeDestroy() {
    clearInterval(this.trme);
  },
  methods: {
    init() {
      this.query();
      this.trme = setInterval(() => this.query(), 10000);
    },
    resizeView() {
      setTimeout(() => this.query, 500);
    },
    query() {
      getGetCarApplyTopList().then((res) => {
        let arr = res.map((v) => {
          return [
            `<span style="color: rgb(200, 200, 200)">${v.createTime}</span>`,
            `<span style="color: rgb(200, 200, 200)">${v.deptName}</span>`,
            `<span style="color: rgb(200, 200, 200)">${v.userName}</span>`,
            `<span style="color: rgb(255, 255, 255)">${v.destinationName}</span>`,
            `<span style="color: rgb(255, 255, 255)">${v.content}</span>`,
            v.reasonName.length < 30
              ? `<span  style="color: rgb(255, 255, 255) ;">${v.reasonName}</span>`
              : `<span class='span'  style="color: rgb(255, 255, 255) ;">${v.reasonName}</span>`,
          ];
        });

        this.config = {
          header: [
            "<span style='font-size:12px'>申请时间</span>",
            "<span style='font-size:12px'>部门</span>",
            "<span style='font-size:12px'>用户名</span>",
            "<span style='font-size:12px'>目的地</span>",
            "<span style='font-size:12px'>内容</span>",
            "<span style='font-size:12px'>出行事由</span>",
          ],
          data: arr,
          columnWidth: [180, 120, 100, 100, 200, 500],
          headerBGC: "rgba(0, 186, 255, 0.48)",
          waitTime: 3000,
        };
      });
    },
  },
};
</script>

<style lang="scss">
.boms {
  width: 100%;
  height: 20vh;
}
@keyframes myfirst {
  from {
    left: 0;
  }
  to {
    left: -200px;
  }
}

@-webkit-keyframes myfirst {
  from {
    left: 0;
  }
  to {
    left: -200px;
  }
}
.span {
  display: block;
  position: relative;
  animation: myfirst 2s;
}
</style>
